<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的车辆</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<block v-for="(item, index) in list" :key="index">
				<view class="car_box">
					<view class="car_list">
						<view class="car_text">
							<view class="title one_line">{{item.title_arr[0]}}</view>
							<view class="text one_line">{{item.title_arr[1]}}</view>
							<view class="card" v-if="item.plate_first">
								<view class="t">{{item.plate_first}}</view>
								<view class="n">{{item.plate_left}}</view>
							</view>
						</view>
						<view class="car_img">
							<image :src="'/static/car/car0'+item.type_id+'.png'" mode="widthFix"></image>
						</view>
					</view>
					<view class="other_box">
						<view class="other" @click.stop="del_car(item.id)">
							<view class="i iconfont icon-changyonggoupiaorenshanchu"></view>
							<view class="t">删除</view>
						</view>
						<view class="other" @click.stop="$r('/pages/personalcenter/car/edit?id='+item.id)">
							<view class="i iconfont icon-bianji"></view>
							<view class="t">编辑</view>
						</view>
					</view>
				</view>
				</block>
				
				<view class="clear_box04"></view>
				
				<view class="confirm" :data-url="'/pages/personalcenter/car/add'" @click="gotopage">添加车辆</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				page : 1,
				load_type : 'more',
				empty_show : '',
				list : [],
				
				
			}
		},
		onLoad() {
            this.loadData();
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			//删除
			del_list(index,msg) {
				setTimeout(() => {
					this.list.splice(index, 1);
					uni.hideLoading();
					this.showMsg(msg);
				}, 600);
			},
			del_car(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除车辆吗？',
					success: (res) => {
						if (res.confirm) {
							//console.log('用户点击确定');
							uni.showLoading({
								title: '删除中'
							});
							this.req({
								url: this.site_url + 'api/auth/index/car_del_hand?car_id='+id,
								method: 'GET',
								success: res => {
									let ret = res.data;
									if (ret.code == 1) {
										 let index = this.list.findIndex(val => val.id === id);
										 let msg = '删除成功';
										this.del_list(index,msg);
									} else {
										 uni.hideLoading();
										this.showMsg(ret.msg);
									}
									
								},
								fail: err => {
									uni.hideLoading();
									this.showMsg('网络错误');
								}
							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
			    let url = this.site_url + 'api/auth/member/loans_car_list?page='+this.page;
				this.areq(url).then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
				});
			
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
	
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.car_box{
		width: 100%;
		background-color: #fff;
		border-radius: 3vw;
		margin-top: 4%;
	}
	
	.car_list{
		display: flex;
		align-items: center;
		padding: 6vw;
	}
	.car_list .car_text{
		flex: 1;
		
	}
	.car_list .car_text .title{
		font-size: 3.2vw;
		color: #333;
		font-weight: bold;
		width: 33vw;
	}
	
	.car_list .car_text .text{
		font-size: 2.8vw;
		color: #666;
		margin-top: 2vw;
		width: 33vw;
	}
	
	.car_list .car_text .card{
		margin-top: 2vw;
		display: flex;
		align-items: center;
		height: 6vw;
	}
	
	.car_list .car_text .card .t{
		width: 6vw;
		height: 100%;
		border-radius: 1vw 0 0 1vw;
		background-color: #FC5E21;
		font-size: 3.2vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.car_list .car_text .card .n{
		height: 100%;
		border-radius: 0 1vw 1vw 0;
		background-color: #FFF7F4;
		font-size: 3.2vw;
		padding: 0 2vw;
		color: #FC5E21;
		display: flex;
		align-items: center;
	}
	
	.car_list .car_img{
		width: 45vw;
		margin-left: 4vw;
	}
	
	.other_box{
		width: 100%;
		height: 13vw;
		display: flex;
		border-top: 1px solid #F3F3F3;
	}
	
	.other_box .other{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.other_box .other:nth-child(1){
		border-right: 1px solid #F3F3F3;
	}
	
	.other_box .other .i{
		font-size: 5vw;
		color: #B8B8B8;
		margin-right: 1vw;
	}
	
	.other_box .other .t{
		font-size: 3.8vw;
		color: #666666;
	}
</style>
